<template>
  <div class="p-2" v-loading="loading">
    <el-card style="margin-bottom: 0.75rem">
      <template #header>
        <div class="custom-detail-header">
          <span>客户信息</span>
          <div class="tab-box">
            <el-radio-group v-model="tabPosition" @change="tabChange">
              <el-radio-button label="1">客户基本信息历史记录</el-radio-button>
              <el-radio-button label="2">拜访记录</el-radio-button>
            </el-radio-group>
            <el-button size="default" icon="Back" type="primary" @click="back">返回</el-button>
          </div>
        </div>
      </template>
      <div class="custom-detail-main">
        <el-descriptions>
          <el-descriptions-item label="中文名：">{{ basicInfo.zhName }}</el-descriptions-item>
          <el-descriptions-item label="英文名：">{{ basicInfo.enName }}</el-descriptions-item>
          <el-descriptions-item label="联系人：">{{ basicInfo.contacts }}</el-descriptions-item>
          <el-descriptions-item label="联系方式：">{{ basicInfo.contactUs }}</el-descriptions-item>
          <el-descriptions-item label="地址：">{{ basicInfo.address }}</el-descriptions-item>
        </el-descriptions>
        <div class="detail-box">
          <div>简介：</div>
          <div v-html="basicInfo.details"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { getCustom } from '@/api/wiki/custom';
import { CustomVO } from '@/api/wiki/custom/types';

const route = useRoute();
const router = useRouter();
const id = route.params.id as string;
const loading = ref(true);
const tabPosition = ref('');
const basicInfo = ref<CustomVO>({});

async function getBasicInfo() {
  const res = await getCustom(id);
  Object.assign(basicInfo.value, res.data);
  loading.value = false;
}

function tabChange(val: string) {
  if (val === '1') router.push({ path: '/custom/history/' + id });
  if (val === '2') router.push({ path: '/custom/visitRecord/' + id });
}

function back() {
  router.push({ path: '/custom' });
}

getBasicInfo()
</script>

<style scoped lang="scss">
.custom-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .tab-box {
    display: flex;
    align-items: center;

    .el-radio-group {
      margin-right: 10px;
    }
  }
}

.custom-detail-main {
  height: calc(100vh - 210px);
  overflow: auto;

  .detail-box {
    display: flex;

    div:first-child {
      width: 50px;
    }

    div:last-child {
      width: calc(100% - 70px);
      overflow: auto;
    }
  }
}
</style>
